import React from 'react';
import './index.less';
import ToDoHeader from '../ToDoHeader';
import ToDoFooter from '../ToDoFooter';
import ToDoList from '../ToDoList';

class Todos extends React.Component {

  state = {
    unFinalList:[
		{id:'001',itemName:'任务1',finalInd:false},
    {id:'002',itemName:'任务2',finalInd:false},
    {id:'003',itemName:'任务3',finalInd:false}],

    finalList:[{id:'004',itemName:'任务4',finalInd:true},
    {id:'005',itemName:'任务5',finalInd:true},
    {id:'006',itemName:'任务6',finalInd:true}],
  }

  checkItemNameSame = (itemName) =>{
    let {unFinalList,finalList} = this.state;
    let unItem = unFinalList.find(item => item.itemName === itemName);
    let finalItem = finalList.find(item => item.itemName === itemName);
    return unItem || finalItem;
  }

  //删除一项
  deleteItem = (id)=>{
		//获取原来的todos
		let {unFinalList,finalList} = this.state;
    
		//删除指定id的todo对象
		const newUnFinalList = unFinalList.filter((item)=>{
			return item.id !== id;
		});
    const newFialList = finalList.filter((item)=>{
			return item.id !== id;
		});
		//更新状态
		this.setState({unFinalList:newUnFinalList,finalList:newFialList});
	}

  //处理勾选修改状态+换列表
	updateItem = (id,finalInd)=>{
    let {unFinalList,finalList} = this.state;
    let newUnFinalList = unFinalList;
    let newFinalList = finalList;
    if(finalInd){//完成
      newUnFinalList = unFinalList.filter((item)=>{
        return item.id !== id;
      });
      const item = unFinalList.find(item =>item.id === id);
      newFinalList = [{...item,finalInd},...finalList];
    }else{//还原
      newFinalList = finalList.filter((item)=>{
        return item.id !== id;
      });
      const item = finalList.find(item =>item.id === id);
      newUnFinalList = [{...item,finalInd},...unFinalList];
    }
    this.setState({unFinalList:newUnFinalList.sort((item1,item2) => item1.itemName.localeCompare(item2.itemName)),
      finalList:newFinalList.sort((item1,item2) => item1.itemName.localeCompare(item2.itemName))});
	}

  //全部清除
  clearAll = () => {
    this.setState({unFinalList:[],finalList:[]});
  }
  //改名
  updateName = (id,itemName) => {
    let {unFinalList,finalList} = this.state;

		let newUnList = unFinalList.map((item)=>{
			if(item.id === id) return {...item,itemName}
			else return item
		});

    let newFinalList = finalList.map((item)=>{
			if(item.id === id) return {...item,itemName}
			else return item
		});
    this.setState({unFinalList:newUnList.sort((item1,item2) => item1.itemName.localeCompare(item2.itemName)),
      finalList:newFinalList.sort((item1,item2) => item1.itemName.localeCompare(item2.itemName))});
  }

  //添加项目的钩子
  addItem = (itemObj) =>{
    const {unFinalList} = this.state;
    const newUnFianlList = [itemObj,...unFinalList];
    this.setState({unFinalList:newUnFianlList.sort((item1,item2) => item1.itemName.localeCompare(item2.itemName))});
  }

  render() {
    const {unFinalList,finalList} = this.state
    return (
      <div className='container'>
        <ToDoHeader addItem = {this.addItem} checkItemNameSame={this.checkItemNameSame}/>
        <ToDoList {...this.state} updateItem={this.updateItem} deleteItem={this.deleteItem} updateName={this.updateName} checkItemNameSame={this.checkItemNameSame}/>
        <ToDoFooter clearAll={this.clearAll}/>
      </div>
    );
  }
}

export default Todos;
